<template>
  <div class="timetableContainer"
	 v-loading="syllabusData.dataloading"
	 element-loading-text="拼命加载中"
   element-loading-background="rgba(255, 255, 255, 0.5)">
    <div class="content">
       <!--模块名称-->
        <!-- <el-row>
          <div class="modelname">课表管理</div>
        </el-row> -->
        <!-- 搜索框-->
        <el-row style="width:15.6rem">
          <el-col :span="22">
            <div class="search-box">
              <el-select
                class="comSearchInput"
                style="width:14%;float: left;"
                v-model="syllabusData.classtext"
                placeholder="所有班级"
                clearable
                filterable
              >
                <el-option
                  v-for="item in classlist"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                class="comSearchInput"
                style="width:14%;float: left;margin-left:.1rem; "
                v-model="syllabusData.teachertext"
                placeholder="所有教师"
                clearable
                filterable
              >
                <el-option
                  v-for="item in teacherlist"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                class="comSearchInput"
                style="width:14%;float: left;margin-left:.1rem;"
                v-model="syllabusData.classroomtext"
                placeholder="所有教室"
                clearable
                filterable
              >
                <el-option
                  v-for="item in classroomlist"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                class="comSearchInput"
                style="width:14%;float: left;margin-left:.1rem; "
                v-model="syllabusData.coursetext"
                placeholder="所有课程"
                clearable
                filterable
              >
                <el-option
                  v-for="item in courselist"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
               <div class="search_btn" @click="changeCondition" style="float: left;margin-left:0.1rem;">搜索</div>
 
            </div>
          </el-col>
          <el-col :span="2">
            <div :class="timetable" @click="clickTimeTable">
              <div class="timetable_icon"></div>
            </div>
            <div :class="list" @click="clicklist">
              <div class="list_icon"></div>
            </div>
          </el-col>
        </el-row>
        <!--课程安排表-->
        <div class="classTableBox" >
          <syllabusCalendar :syllabusData="syllabusData" ref="syllabusControl"></syllabusCalendar>
        </div>
    </div>
  </div>
</template>

<script>
import syllabusCalendar from "../work_platform/syllabus/syllabusCalendar"; //课程表
export default {
  components: {
    syllabusCalendar,
  },
  data() {
    return {
      timetable: "timetableactive",
      list: "list",
      classlist: [],
      teacherlist: [
        { name: "韩梅梅", value: "韩梅梅" },
        { name: "李雷", value: "李雷" }
      ],
      courselist: [],
      classroomlist: [],
      //我的课表
      syllabusData: {
        classtext: "", //班级
        teachertext: "", //教师
        classroomtext: "", //教室
        coursetext: "", //课程
        headerType: false, //工作台 true / 教务管理 false
        radio: "今日",
				currentTime: "2019-04-02", //当前显示时间
				/**数据加载等待 */
        dataloading:false,
        containTrialClass:0
      }
    };
  },
  methods: {
    /**初始化 */
    init(){
      let self=this;
      // let user=JSON.parse(tool.getItem(window.lsKey.user));
      let campusId=this.$store.state.campusId;
      this.syllabusData.classtext='';
      this.syllabusData.teachertext='';
      this.syllabusData.classroomtext='';
      this.syllabusData.coursetext='';

      //班级初始化
       api.getclassalllist({campusId:campusId}).then(function(d){
        // console.log(d)
        if(d.result=='操作成功'){
          let classlist=d.list;
          self.classlist=classlist.map(function(row){
            return {name:row.className,value:row.classId}
          });
          
          self.syllabusData.classtext = self.$route.query.classId||"";
          self.$refs.syllabusControl.init();
     
        }
      });
      //教师初始化
      api.userListByCampus({campusId:campusId}).then(function(d){
        // console.log(d)
        if(d.result=='处理成功'){
          let teacherlist=d.userList;
          self.teacherlist=teacherlist.map(function(row){
            return {name:row.nickName,value:row.userId}
          });
        }
      });

      //教室初始化
      api.getClassroomList({campusId:campusId}).then(function(d){
        if(d.result=='操作成功'){
          let classroomlist=d.info;
          self.classroomlist=classroomlist.map(function(row){
            return {name:row.name,value:row.classroomId}
          });
        }
      });
      //课程初始化
      api.courseList({campusId:campusId,currPage:-1}).then(function(d){
        // console.log(d)
        if(d.result=='操作成功'){
          let courselist=d.list;
          self.courselist=courselist.map(function(row){
            return {name:row.courseName,value:row.courseId}
          });
        }
      });
    },
    campusChange : function(campusId) { //校区改变
      this.campusId = campusId;
      this.init();
      this.$refs.syllabusControl.campusChange(campusId);
		},
    /**切换课表条件 */
    changeCondition() {
      this.$refs.syllabusControl.updateClassTableByCondition();
    },
    /**切换至课程表 */
    clickTimeTable() {
      this.timetable = "timetableactive";
			this.list = "list";
			this.$refs.syllabusControl.changeDisplayType(1);
    },
    /**切换至 表格 */
    clicklist() {
      this.timetable = "timetable";
			this.list = "listactive";
			this.$refs.syllabusControl.changeDisplayType(2);
    }
  },
  mounted(){
    this.init();
  }
};
</script>

<style lang="scss">
.timetableContainer {
  padding-top: 0.2rem;
  .content{
    margin:  0 auto;
    min-width: 15.6rem;
    width: 15.6rem;
    .modelname {
      width: 100%;
      height: 0.6rem;
      font-size: 0.26rem;
      color: #141414;
      line-height: 0.6rem;
      font-family: "microsoft yahei";
      font-weight: bold;
    }
    .el-col-22{
      width: 14.5859rem;
    }
    .el-col-2 {
        width: 1.0036rem;
    }
    .search-box {
      .prefixiconsearch {
        height: 0.22rem;
        width: 0.22rem;
        margin-top: 0.1rem;
        margin-right: 0.1rem;
        background: url(../../assets/img/common/search_icon.png);
        background-size: cover;
      }
      .el-input__inner {
    		border-radius: 0.08rem;
        font-size: 0.16rem;
        color: #666666;
        height: 0.36rem !important;
        line-height: 0.36rem;
      }
    }
    .timetable {
      width: 0.5rem;
      height: 0.36rem;
      border-top-left-radius: 0.1rem;
      border-bottom-left-radius: 0.1rem;
      float: left;
      border: 0.01rem solid #dcdfe6;
      cursor: pointer;
      .timetable_icon {
        float: left;
        width: 0.18rem;
        height: 0.19rem;
        background: url(../../assets/img/education_manage/timetable_icon.png);
        background-size: cover;
        margin-top: 0.08rem;
        margin-left: 0.16rem;
      }
    }
    .timetableactive {
      width: 0.5rem;
      height: 0.36rem;
      border-top-left-radius: 0.1rem;
      border-bottom-left-radius: 0.1rem;
      float: left;
      border: 0.01rem solid #dcdfe6;
      background: #ffffff;
      cursor: pointer;
      .timetable_icon {
        float: left;
        width: 0.18rem;
        height: 0.19rem;
        background: url(../../assets/img/education_manage/timetable_icon_active.png);
        background-size: cover;
        margin-top: 0.08rem;
        margin-left: 0.16rem;
      }
    }
    .list {
      width: 0.5rem;
      height: 0.36rem;
      border-top-right-radius: 0.1rem;
      border-bottom-right-radius: 0.1rem;
      float: left;
      border: 0.01rem solid #dcdfe6;
      border-left: none;
      cursor: pointer;
      .list_icon {
        float: left;
        width: 0.18rem;
        height: 0.16rem;
        background: url(../../assets/img/education_manage/list_icon.png);
        background-size: cover;
        margin-top: 0.08rem;
        margin-left: 0.16rem;
      }
    }
    .listactive {
      width: 0.5rem;
      height: 0.36rem;
      border-top-right-radius: 0.1rem;
      border-bottom-right-radius: 0.1rem;
      float: left;
      border: 0.01rem solid #dcdfe6;
      border-left: none;
      background: #ffffff;
      cursor: pointer;
      .list_icon {
        float: left;
        width: 0.18rem;
        height: 0.16rem;
        background: url(../../assets/img/education_manage/list_icon_active.png);
        background-size: cover;
        margin-top: 0.08rem;
        margin-left: 0.16rem;
      }
    }
    .classTableBox {
      margin-left: 0;
      margin-top: 0.2rem;
      width: 15.6rem;
      height: auto;
      background: #fff;
      border: 0.01rem solid #dcdfe6;
      border-radius: 0.1rem;
      box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
    
      .timeselect {
        position: absolute;
        right: 0.2rem;
        top: -0.05rem;
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          color: #3885f8;
          font-weight: bold;
          background: #ffffff;
          border: 0.01rem solid #dcdfe6;
          -webkit-box-shadow: 0rem 0 0 0 #ffffff;
          box-shadow: 0rem 0 0 0 #ffffff;
        }
      }
    }
  }
  
}
// 搜索框样式
.comSearchInput .el-input__inner {
  // background-color: #f7f8fa;
  border-radius: 0.08rem;
  font-size: 0.16rem;
  color: #666666;
  height: 0.36rem !important;
  line-height: 0.36rem !important;
}
</style>